    <!DOCTYPE html>
    <html>
    <head>
        <title>五子棋游戏</title>
        <style type="text/css">
            
      canvas {
                display: block;
                margin: 50px auto;
                box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
                cursor: pointer;
            }

            .btn-wrap {
                display: flex;
                flex-direction: row;
                justify-content: center;
            }

            .btn-wrap div {
                margin: 0 10px;
            }

            div>span {
                display: inline-block;
                padding: 10px 20px;
                color: #fff;
                background-color: #EE82EE;
                border-radius: 5px;
                cursor: pointer;
            }
            
            div.unable span {
                background: #D6D6D4;
                color: #adacaa;
            }
            
            #result-wrap {
                text-align: center;
                color:pink;
            }
        </style>
         
    </head>
    <body>
        <div>
            <h1 id="result-wrap">五子棋游戏</h1>
            <canvas id="chess" width="450px" height="450px"></canvas>
            <div class="btn-wrap">
                <div id='restart' class="restart">
                    <span>重新开始</span>
                </div>
                <div id='goback' class="goback unable">
                    <span>悔棋</span>
                </div>
                <div id='return' class="return unable">
                    <span>撤销悔棋</span>
                </div>
            </div>
    </div>
    <script>
        var over = false;
        var me = true; //我 
        var _nowi = 0, _nowj = 0; //记录自己下棋的坐标 
        var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标 
        var _myWin = [], _compWin = []; //记录我，计算机赢的情况 
        var backAble = false, returnAble = false;
        var resultTxt = document.getElementById('result-wrap');
        var chressBord = [];//棋盘 
        for (var i = 0; i < 15; i++) {
            chressBord[i] = [];
            for (var j = 0; j < 15; j++) {
                chressBord[i][j] = 0;
            }
        }
        //赢法的统计数组 
        var myWin = [];
        var computerWin = [];
        //赢法数组 
        var wins = [];
        for (var i = 0; i < 15; i++) {
            wins[i] = [];
            for (var j = 0; j < 15; j++) {
                wins[i][j] = [];
            }
        }
        var count = 0; //赢法总数 
        //横线赢法 
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[i][j + k][count] = true;
                }
                count++;
            }
        }
        //竖线赢法 
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[j + k][i][count] = true;
                }
                count++;
            }
        }
        //正斜线赢法 
        for (var i = 0; i < 11; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[i + k][j + k][count] = true;
                }
                count++;
            }
        }
        //反斜线赢法 
        for (var i = 0; i < 11; i++) {
            for (var j = 14; j > 3; j--) {
                for (var k = 0; k < 5; k++) {
                    wins[i + k][j - k][count] = true;
                }
                count++;
            }
        }
        // debugger; 
        for (var i = 0; i < count; i++) {
            myWin[i] = 0;
            _myWin[i] = 0;
            computerWin[i] = 0;
            _compWin[i] = 0;
        }
        var chess = document.getElementById("chess");
        var context = chess.getContext('2d');
        context.strokeStyle = '#bfbfbf'; //边框颜色 
        var backbtn = document.getElementById("goback");
        var returnbtn = document.getElementById("return");
        window.onload = function () {
            drawChessBoard(); // 画棋盘 
        }
        document.getElementById("restart").onclick = function () {
            window.location.reload();
        }
        // 我，下棋 
        chess.onclick = function (e) {
            if (over) {
                return;
            }
            if (!me) {
                return;
            }
            // 悔棋功能可用 
            backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
            var x = e.offsetX;
            var y = e.offsetY;
            var i = Math.floor(x / 30);
            var j = Math.floor(y / 30);
            _nowi = i;
            _nowj = j;
            if (chressBord[i][j] == 0) {
                oneStep(i, j, me);
                chressBord[i][j] = 1; //我，已占位置 

                for (var k = 0; k < count; k++) { // 将可能赢的情况都加1 
                    if (wins[i][j][k]) {
                        // debugger; 
                        myWin[k]++;
                        _compWin[k] = computerWin[k];
                        computerWin[k] = 6;//这个位置对方不可能赢了 
                        if (myWin[k] == 5) {
                            // window.alert('你赢了'); 
                            resultTxt.innerHTML = '恭喜，你赢了！';
                            over = true;
                        }
                    }
                }
                if (!over) {
                    me = !me;
                    computerAI();
                }
            }
        }
        // 悔棋 
        backbtn.onclick = function (e) {
            if (!backAble) { return; }
            over = false;
            me = true;
            // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中'; 
            // 撤销悔棋功能可用 
            returnbtn.className = returnbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
            chressBord[_nowi][_nowj] = 0; //我，已占位置 还原 
            minusStep(_nowi, _nowj); //销毁棋子 
            for (var k = 0; k < count; k++) { // 将可能赢的情况都减1 
                if (wins[_nowi][_nowj][k]) {
                    myWin[k]--;
                    computerWin[k] = _compWin[k];//这个位置对方可能赢 
                }
            }
            // 计算机相应的悔棋 
            chressBord[_compi][_compj] = 0; //计算机，已占位置 还原 
            minusStep(_compi, _compj); //销毁棋子   
            for (var k = 0; k < count; k++) { // 将可能赢的情况都减1 
                if (wins[_compi][_compj][k]) {
                    computerWin[k]--;
                    myWin[k] = _myWin[i];//这个位置对方可能赢 
                }
            }
            resultTxt.innerHTML = '益智五子棋';
            returnAble = true;
            backAble = false;
        }
        // 撤销悔棋 
        returnbtn.onclick = function (e) {
            if (!returnAble) { return; }
            // 我，撤销悔棋 
            chressBord[_nowi][_nowj] = 1; //我，已占位置 
            oneStep(_nowi, _nowj, me);
            for (var k = 0; k < count; k++) {
                if (wins[_nowi][_nowj][k]) {
                    myWin[k]++;
                    _compWin[k] = computerWin[k];
                    computerWin[k] = 6;//这个位置对方不可能赢 
                }
                if (myWin[k] == 5) {
                    resultTxt.innerHTML = '恭喜，你赢了！';
                    over = true;
                }
            }
            // 计算机撤销相应的悔棋 
            chressBord[_compi][_compj] = 2; //计算机，已占位置 
            oneStep(_compi, _compj, false);
            for (var k = 0; k < count; k++) { // 将可能赢的情况都减1 
                if (wins[_compi][_compj][k]) {
                    computerWin[k]++;
                    _myWin[k] = myWin[k];
                    myWin[k] = 6;//这个位置对方不可能赢 
                }
                if (computerWin[k] == 5) {
                    resultTxt.innerHTML = '计算机赢了';
                    over = true;
                }
            }
            returnbtn.className += ' ' + 'unable';
            returnAble = false;
            backAble = true;
        }
        // 计算机下棋 
        var computerAI = function () {
            var myScore = [];
            var computerScore = [];
            var max = 0;
            var u = 0, v = 0;
            for (var i = 0; i < 15; i++) {
                myScore[i] = [];
                computerScore[i] = [];
                for (var j = 0; j < 15; j++) {
                    myScore[i][j] = 0;
                    computerScore[i][j] = 0;
                }
            }
            for (var i = 0; i < 15; i++) {
                for (var j = 0; j < 15; j++) {
                    if (chressBord[i][j] == 0) {
                        for (var k = 0; k < count; k++) {
                            if (wins[i][j][k]) {
                                if (myWin[k] == 1) {
                                    myScore[i][j] += 200;
                                } else if (myWin[k] == 2) {
                                    myScore[i][j] += 400;
                                } else if (myWin[k] == 3) {
                                    myScore[i][j] += 2000;
                                } else if (myWin[k] == 4) {
                                    myScore[i][j] += 10000;
                                }

                                if (computerWin[k] == 1) {
                                    computerScore[i][j] += 220;
                                } else if (computerWin[k] == 2) {
                                    computerScore[i][j] += 420;
                                } else if (computerWin[k] == 3) {
                                    computerScore[i][j] += 2100;
                                } else if (computerWin[k] == 4) {
                                    computerScore[i][j] += 20000;
                                }
                            }
                        }

                        if (myScore[i][j] > max) {
                            max = myScore[i][j];
                            u = i;
                            v = j;
                        } else if (myScore[i][j] == max) {
                            if (computerScore[i][j] > computerScore[u][v]) {
                                u = i;
                                v = j;
                            }
                        }

                        if (computerScore[i][j] > max) {
                            max = computerScore[i][j];
                            u = i;
                            v = j;
                        } else if (computerScore[i][j] == max) {
                            if (myScore[i][j] > myScore[u][v]) {
                                u = i;
                                v = j;
                            }
                        }

                    }
                }
            }
            _compi = u;
            _compj = v;
            oneStep(u, v, false);
            chressBord[u][v] = 2; //计算机占据位置 
            for (var k = 0; k < count; k++) {
                if (wins[u][v][k]) {
                    computerWin[k]++;
                    _myWin[k] = myWin[k];
                    myWin[k] = 6;//这个位置对方不可能赢了 
                    if (computerWin[k] == 5) {
                        resultTxt.innerHTML = '计算机赢了';
                        over = true;
                    }
                }
            }
            if (!over) {
                me = !me;
            }
            backAble = true;
            returnAble = false;
            var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
            if (!hasClass) {
                returnbtn.className += ' ' + 'unable';
            }
        }
        //绘画棋盘 
        var drawChessBoard = function () {
            for (var i = 0; i < 15; i++) {
                context.moveTo(15 + i * 30, 15);
                context.lineTo(15 + i * 30, 435);
                context.stroke();
                context.moveTo(15, 15 + i * 30);
                context.lineTo(435, 15 + i * 30);
                context.stroke();
            }
        }
        //画棋子 
        var oneStep = function (i, j, me) {
            context.beginPath();
            context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆 
            context.closePath();
            //渐变 
            var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
            if (me) {
                gradient.addColorStop(0, '#0a0a0a');
                gradient.addColorStop(1, '#636766');
            } else {
                gradient.addColorStop(0, '#d1d1d1');
                gradient.addColorStop(1, '#f9f9f9');
            }
            context.fillStyle = gradient;
            context.fill();
        }
        //销毁棋子 
        var minusStep = function (i, j) {
            //擦除该圆 
            context.clearRect((i) * 30, (j) * 30, 30, 30);
            // 重画该圆周围的格子 
            context.beginPath();
            context.moveTo(15 + i * 30, j * 30);
            context.lineTo(15 + i * 30, j * 30 + 30);
            context.moveTo(i * 30, j * 30 + 15);
            context.lineTo((i + 1) * 30, j * 30 + 15);
            context.stroke();
        } 
    </script>
    </body>
    </html>


  
